// 重写hover样式
.navigator-hover{
    background-color: transparent !important;
    opacity: .8;
}
.navigator-none{
    background-color: transparent !important;
    opacity: 1;
}

// 倒三角
.arrow-downs{
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: 10rpx solid #666;
    border-left: 10rpx solid transparent;
    border-right: 10rpx solid transparent;
    vertical-align: middle;
    transition: transform .2s;
    &.round{
        transform: rotate(180deg);
    }
}

// 线条
.border-{
    &-normal,&-top,&-right,&-left,&-bottom{
      position: relative;
      z-index: 1;
      &::after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        top: 0;
        right: 0;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: left top;
        transform-origin: left top;
        z-index: -1;
      }
    }
    &-normal::after{
        border: 1px solid $uni-border-color;
    }
    &-normal.round::after{
        border-radius: 100rpx 100rpx;
    }
    &-bottom::after{
        border-bottom: 1px solid $uni-border-color;
    }
    &-right::after{
        border-right: 1px solid $uni-border-color;
    }
    &-left::after{
        border-left: 1px solid $uni-border-color;
    }
    &-top::after{
        border-top: 1px solid $uni-border-color;
    }
    &-active::after{
        border-color: $theme-color;
    }
}

// 按钮样式
.btn-theme{
    color: #fff;
    background-color: $theme-color;
    transition: opacity 0.15s, backgroundColor 0.15s;
    &.button-hover{
        color: hsla(0,0%,100%,.8);
        background-color: #a56837;
    }
    &[disabled]{
        color: #fff;
        background-color: #b88154;
        opacity: .8;
    }
}
.btn-yellow{
    color: #fff;
    background-color: #ff9600;
    transition: opacity 0.15s, backgroundColor 0.15s;
    &.button-hover{
        color: hsla(0,0%,100%,.8);
        background-color: #e28500;
    }
    &[disabled]{
        color: #fff;
        background-color: #ff9600;
        opacity: .8;
    }
}
.btn-cyan{
    color: #fff;
    background-color: #2db7f5;
    transition: opacity 0.15s, backgroundColor 0.15s;
    &.button-hover{
        color: hsla(0,0%,100%,.8);
        background-color: #149ad6;
    }
    &[disabled]{
        color: #fff;
        background-color: #2db7f5;
        opacity: .8;
    }
}
.btn-blue{
    color: #fff;
    background-color: #007aff;
    transition: opacity 0.15s, backgroundColor 0.15s;
    &.button-hover{
        color: hsla(0,0%,100%,.8);
        background-color: #0062cc;
    }
    &[disabled]{
        color: #fff;
        background-color: #007aff;
        opacity: .8;
    }
}
.btn-red{
    color: #fff;
    background-color: #e64340;
    transition: opacity 0.15s, backgroundColor 0.15s;
    &.button-hover{
        color: hsla(0,0%,100%,.8);
        background-color: #ce3c39;
    }
    &[disabled]{
        color: #fff;
        background-color: #e64340;
        opacity: .8;
    }
}
.btn-round{
    border-radius: 50rpx 50rpx;
}

